<template>
    <div>
        <el-table
        :data="tableData" class="el_table_buffclass">
            <el-table-column
                prop="id"
                label="编号"
                width="180">
            </el-table-column>
            <el-table-column
                prop="name"
                label="姓名"
                width="180">
            </el-table-column>
            <el-table-column
                prop="price"
                label="价格">
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts">
import { getCurrentInstance, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
export default {
    setup() {
        let {ctx}:any = getCurrentInstance();
        const tableData = ref(null);
        const getListData = async() =>{
            try {
                ctx.$axios.get("/list").then((res: any)=>{
                    if (res.code === 0) {
                        console.log("getListData",res);
                        tableData.value = res.data;
                    }
                })
            } catch (error) {
                console.log(error);
            }
        }
        onMounted(async()=>{
            getListData();
        })

        return{
            tableData
        }
    }
}
</script>

<style lang="stylus">
.el_table_buffclass
    width: 500px
    margin:0 auto
    margin-top:100px
</style>